<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hellow</h1>
    <input type=" text" placeholder="你想找谁" aria-colspan="3"> <input type="button" value="查询">
    <input type="button" value="添加" onclick="add()">
    <table>
 
        <thead>
            <th>编号</th>
            <th>学生名字</th>
            <th>学生班级</th>
            <th>编辑</th>
    
        </thead>
        <tbody class="tbody"></tbody>
    </table>

</body>
</html>
<script src="./axios.min.js"></script>
<script src="./jquery-3.7.1.min (1).js"></script>
<script src="./index.js"></script>
<script>
    window.addEventListener('load',function(){
        axios.get(url).then((e)=>{
          let data=e.data
            const tbody = document.querySelector('.tbody')
            data.forEach(e => {
                let arr=
                `
                    <tr>
        <td>${e.id}</td>
        <td>${e.name}</td>
        <td>${e.className}</td>
        <td>
            <input type="button" value="编辑" onclick="edit('${e.id}')">
            <input type="button" value="删除" onclick="remove('${e.id}')">
        </td>
    </tr>`      


    tbody.innerHTML +=arr
            });
        })
    })
</script>
<style>
    table,th,td{
        border: 1px solid;
        border-collapse: collapse;
    }
    /* th, td {
        border: 1px solid;
    } */
</style>